import React from 'react';
import { Card, Row, Col, Statistic, Typography } from 'antd';
import { 
  UserOutlined, 
  BookOutlined, 
  AimOutlined,
  CloudOutlined 
} from '@ant-design/icons';

const { Title } = Typography;

const Dashboard: React.FC = () => {
  return (
    <div>
      <Title level={2}>管理概览</Title>
      
      <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="总用户数"
              value={1250}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="活跃用户"
              value={856}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#52c41a' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="职业信息"
              value={45}
              prefix={<AimOutlined />}
              valueStyle={{ color: '#faad14' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="存储使用"
              value="2.5GB"
              prefix={<CloudOutlined />}
              valueStyle={{ color: '#722ed1' }}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]}>
        <Col xs={24} lg={12}>
          <Card title="系统状态">
            <p>系统运行正常</p>
            <p>数据库连接正常</p>
            <p>文件存储正常</p>
          </Card>
        </Col>
        
        <Col xs={24} lg={12}>
          <Card title="最近活动">
            <p>用户注册: 15人</p>
            <p>文件上传: 128个</p>
            <p>AI对话: 256次</p>
            <p>学习记录: 512条</p>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard;
